<template>
	<view id="addressManagerPage">
		<!-- <view class="add">
			+ 新增地址
		</view> -->
		<view class="address-wrapper" v-if="list.length" key="has">
			<view class="sec" v-for="(item,index) in list" :key="item.id">
				<view class="con" @click="useIt">
					<view class="title">
						<view class="name">
							{{item.username}}
						</view>
						<view class="tel">
							{{item.tel}}
						</view>
					</view>
					<view class="address">
						{{item.address}} 					                        
					</view>
				</view>
				<view class="use-wrapper">
					<view class="sel-area using">
						<!-- <image src="../../static/img/selected.png" class="sel" mode="aspectFill"></image>
						<text class="sel-txt">选择该地址</text> -->
					</view>
					<view class="opa-area">
						<view class="opa" @click="toEdit()">
							<image src="../../static/img/edit.png" mode="aspectFill" class="edit-ico"></image>
							<text class="opa-txt">编辑</text>
						</view>
						<view class="opa">
							<image src="../../static/img/delete.png" mode="aspectFill" class="detail-ico"></image>
							<text class="opa-txt">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="address-wrapper list-null" v-else key="null">
			<image src="../../static/img/null.png" mode="aspectFill" class="null"></image>
			<view class="null-txt">
				暂无收货地址~
			</view>
		</view>

		<view class="foooter-next"  @click="doPay">
			新增地址
		</view>
	</view>
</template>

<script>
	import { addressList } from '../../utils/data.js'
	export default {
		data() {
			return {
				list: addressList
			}
		},
		methods: {
			useIt() {
				uni.navigateBack({
					delta: -1
				})
			},
			toEdit() {
				uni.navigateTo({
					url: '../adressEdit/adressEdit',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
.add {
	height: 78upx;
	line-height: 78upx;
	text-align: center;
	font-size:30upx;
	font-weight:500;
	color:rgba(17,24,33,1);
	background: #EA0A2A;
}
.sec {
	height: 260upx;
}
.con {
	height: 129upx;
	border-bottom: 1upx solid #F5F2ED;
	padding: 59upx 0 39upx 29upx;
}
.title {
	font-size:32upx;
	font-weight:500;
	color:rgba(34,34,34,1);
}
.name, .tel {
	margin-right: 40upx;
	display: inline-block;
}
.address {
	margin: 19upx 0 0 0;
	width: 614upx;
	font-size:28upx;
	font-weight:400;
	color:rgba(153,153,153,1);
	line-height: 36upx;
}
.use-wrapper {
	height: 80upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30upx;
}
.sel {
	width: 30upx;
	height: 30upx;
}
.sel-area {
	font-size:24upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(138,133,124,1);
}
.sel-area.using {
	color:rgba(234,10,42,1);
}
.sel-txt {
	margin-left: 11upx;
}
.opa-area {
	display: flex;
	align-items: center;
	font-size:24upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(138,133,124,1);
}
.opa {
	margin-left: 40upx;
	display: flex;
	align-items: center;
}
.edit-ico {
	width: 28upx;
	height: 32upx;
}
.detail-ico {
	width: 28upx;
	height: 28upx;
}
.opa-txt {
	margin-left: 8upx;
}
.list-null {
	padding-top: 207upx;
}
</style>
